<template>
  <div class="mb-4">
    <div class="flex">
      <div class="mr-4 flex flex-col items-center">
        <div :class="['p-2 rounded-full', getActivityColor(item.activity)]">
          <i :class="['fas', getActivityIcon(item.activity), getIconColor(item.activity)]"></i>
        </div>
        <div class="w-0.5 h-full bg-gray-200 mt-2"></div>
      </div>
      <div class="flex-1">
        <div
            class="flex items-center justify-between cursor-pointer"
            @click="toggleExpanded"
        >
          <div>
            <p class="text-gray-500 text-sm">
              <i class="fas fa-clock inline mr-1"></i>{{ item.time }}
            </p>
            <h3 class="font-medium text-lg">{{ item.activity }}</h3>
          </div>
          <button
              class="p-1 rounded-full hover:bg-gray-100"
              @click.stop="toggleExpanded"
          >
            <i :class="['fas', expanded ? 'fa-chevron-down' : 'fa-chevron-right', 'text-gray-600 w-5 h-5']"></i>
          </button>
        </div>
        <ActivityDetails
            v-if="expanded"
            :details="item.details"
            :activity="item.activity"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import ActivityDetails from './ActivityDetails.vue';

export default {
  name: 'ScheduleItem',
  components: {
    ActivityDetails
  },
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  setup() {
    const expanded = ref(false);

    const toggleExpanded = () => {
      expanded.value = !expanded.value;
    };

    // 获取活动图标
    const getActivityIcon = (activity) => {
      switch (activity.toLowerCase()) {
        case '火车':
          return 'fa-train';
        case '早餐':
        case '午餐':
        case '晚餐':
          return 'fa-utensils';
        case '景点':
          return 'fa-camera';
        case '交通':
          return 'fa-car';
        case '住宿':
          return 'fa-bed';
        default:
          return 'fa-map-marker-alt';
      }
    };

    // 获取活动背景颜色
    const getActivityColor = (activity) => {
      switch (activity.toLowerCase()) {
        case '火车':
          return 'bg-blue-100';
        case '早餐':
        case '午餐':
        case '晚餐':
          return 'bg-orange-100';
        case '景点':
          return 'bg-green-100';
        case '交通':
          return 'bg-purple-100';
        case '住宿':
          return 'bg-indigo-100';
        default:
          return 'bg-gray-100';
      }
    };

    // 获取活动图标颜色
    const getIconColor = (activity) => {
      switch (activity.toLowerCase()) {
        case '火车':
          return 'text-blue-600';
        case '早餐':
        case '午餐':
        case '晚餐':
          return 'text-orange-600';
        case '景点':
          return 'text-green-600';
        case '交通':
          return 'text-purple-600';
        case '住宿':
          return 'text-indigo-600';
        default:
          return 'text-gray-600';
      }
    };

    return {
      expanded,
      toggleExpanded,
      getActivityIcon,
      getActivityColor,
      getIconColor
    };
  }
};
</script>